*,
::before,
::after {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  font-family: SourceHanSansCN;
  line-height: 1;
  color: var(--color-dark--1);

  /* 如果绝对定位没有设置相对位置则不生效 */
  /* overflow-x: hidden; */
}

:root {
  --color-brand--1: #4481eb;
  --color-brand--2: #04befe;
  --color-brand--3: #7345bc;
  --color-brand--4: #47a6ff;
  --color-brand--5: #47a6ff2f;

  --color-dark--1: #252525;
  --color-dark--2: #6e6e6e;
  --color-dark--3: #e5e5e5;
  --color-dark--4: #5b5b5b;

  --color-red--1: #ff3d4d;
  --color-red--2: #ff2a39;
  --color-red--3: #ff6c71;

  --color-origin--1: #ff562f;
  --color-origin--2: #ffe0d4;
  --color-origin--3: #ff8828;
  --color-origin--4: #f4a600;
  --color-origin--5: #ff750c;
  --color-origin--6: #ff6e02;
  --color-origin--7: #ffaa16;

  --color-blue--1: #4e8fee;
  --color-blue--2: #5397ff;
  --color-blue--3: #cae9ff;

  --color-light--1: #ececec;
  --color-light--2: #d6dee0;

  --color-car-bac--1: #ffdbdc;
  --color-car-bac--2: #c3dfff;
  --color-car-bac--3: #fffbe3;
}

/* ************************ */
/* ************************ */
/* nav-section */
.nav-section {
  width: 100%;
  padding: 1.3rem 0;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  z-index: 200;
}
.nav-box {
  display: flex;
  justify-content: space-around;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-img-box {
  height: 4rem;
  position: relative;
}
.nav-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nav-text {
  font-weight: 500;
  font-size: 2.4rem;
  margin-top: 1rem;
}
/* ************************ */
/* ************************ */
/* nav-item--active */
.nav-item--active .nav-text {
  background: linear-gradient(#4481eb, #04befe);
  -webkit-background-clip: text;
  color: transparent;
}

.goto-view {
  text-decoration: none;
}
.goto-view:link,
.goto-view:visited {
  color: initial;
  text-decoration: none;
}
.goto-view:hover,
.goto-view:active {
  color: initial;
  text-decoration: none;
}
